<template>
  <div>
    <ul class="px-waterfall left" v-for="(el, i) in newWaterfallData2" :key="i">
      <li
        class="mb-[30px] last:mb-[50px]"
        v-for="(item, index) in el"
        :key="index"
      >
        <div class="img-border relative shadow-md rounded-md">
          <var-image
            class="bg-img max-h-[200px]"
            style="border-radius: 5px"
            ripple
            lazy
            @click="preview(item.photo, item.id, item.phone)"
            :src="item.photo"
          />
          <var-image-preview
            :images="previewArr"
            @close="handleClosePreview"
            v-model:show="previewShow"
          >
            <template #extra>
              <var-icon
                v-show="isDel"
                name="menu"
                :size="22"
                @click="openAction"
                color="#fff"
              />
            </template>
          </var-image-preview>
          <span
            v-if="!isInfo"
            class="block ml-[5px] h-[20px] leading-[20px] my-[8px] text-[13px] whitespace-nowrap overflow-hidden overflow-ellipsis"
          >
            {{ item.photo_name }}
          </span>
          <div
            class="flex justify-between my-[10px] rounded-md p-[5px]"
            v-if="isInfo"
          >
            <div class="flex h-[25px] items-center">
              <var-image
                :src="item.avatar"
                fit="cover"
                width="20px"
                height="20px"
                radius="50%"
              />
              <span class="ml-[5px] text-[12px] text-[#848282]">
                {{ item.nick_name }}
              </span>
            </div>
            <div class="flex items-center">
              <span class="mr-[2px] text-[#848282]">{{ item.like_count }}</span>
              <var-icon
                name="heart"
                :class="`love_icon${item.id}`"
                @click="changeLike(item, index)"
                color="#ff0000"
              />
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { ActionSheet, Dialog, Snackbar } from "@varlet/ui";
import { deleteUserContent, setPhotoLike } from "@/api/usersApi";
import { throttle } from "@/utils/utils";
const props = defineProps({
  listData: {
    type: Array,
    default: [],
  },
  isInfo: {
    type: Boolean,
    default: () => true,
  },
  isDel: {
    type: Boolean,
    default: () => true,
  },
});
const emits = defineEmits(["reloadList"]);
const preViewPhone = ref<string>("");
const newWaterfallData2 = ref<any>([]);
const previewShow = ref<boolean>(false);
const previewArr = ref([]);
/*  预览图片的id */
const previewId = ref<string>("");
/** 图片预览 */
const preview = (photo: string, id: string, phone: string) => {
  previewArr.value.push(photo);
  setTimeout(() => {
    previewShow.value = true;
  }, 500);
  previewId.value = id;
  preViewPhone.value = phone;
};
/**
 * 关闭图片预览清空数组
 */
const handleClosePreview = () => {
  setTimeout(() => {
    previewArr.value = [];
    previewId.value = "";
    preViewPhone.value = "";
  }, 500);
};
/**
 * 展示删除动作栏
 */
const openAction = async () => {
  console.log(previewId.value);
  await ActionSheet({
    actions: [{ name: "删除", icon: "trash-can" }],
    title: "请选择",
    onSelect: async (action) => {
      switch (action.name) {
        case "删除":
          dialogActions[await Dialog("你确定要删除吗？")]();
          break;
      }
    },
  });
};
/**
 * 首页喜欢按钮操作
 * 节流：动画效果更友好
 */
const changeLike = throttle(async (item: any) => {
  /** 添加动画效果 start */
  const selector = document.querySelector(`.love_icon${item.id}`);
  selector.classList.add("magictime", "puffIn");
  setTimeout(() => {
    selector.classList.remove("magictime", "puffIn");
  }, 1000);
  /** 添加动画效果 end */
  try {
    const params = {
      who_phone: localStorage.getItem("phone"),
      phone: item.phone,
      photo_id: item.id,
      photo_url: item.photo_name,
    };
    const { code } = await setPhotoLike(params);
    if (code == 200) {
      item.like_count += 1;
      emits("reloadList");
    }
  } catch (e) {
    console.error(e);
  }
}, 1000);
/**
 * 动作面板 事件处理
 */
const dialogActions = {
  confirm: async () => {
    try {
      const params = {
        phone: localStorage.getItem("phone"),
        id: previewId.value,
      };
      const { code } = await deleteUserContent(params);
      if (code) {
        Snackbar.success("删除成功");
        previewShow.value = false;
        previewArr.value = [];
        emits("reloadList");
      }
    } catch (e) {
      Snackbar.error(e);
    }
  },
};
/**
 * 监听数据改变
 */
watch(
  () => props.listData,
  () => {
    let [...waterfallData] = props.listData;
    let [...newWaterfallData] = [[], []];
    waterfallData.forEach((el, i) => {
      switch (i % 2) {
        case 0:
          newWaterfallData[0].push(el);
          break;
        case 1:
          newWaterfallData[1].push(el);
          break;
      }
    });
    newWaterfallData2.value = newWaterfallData;
  }
);
</script>

<style lang="less" scoped>
.px-container {
  width: 100%;
  margin: 0 auto;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.clearfix {
  zoom: 1;
}

.left {
  float: left;
}

.color-fff {
  color: #fc1212;
}

.fh {
  overflow: hidden;
}

.waterfall {
  margin-top: 20px;
}

.px-waterfall {
  width: 45%;
  margin: 9px;

  img.bg-img {
    border-radius: 8px !important;
  }

  h3 {
    text-overflow: ellipsis;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 30px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    line-height: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
  }

  li {
    background: #fff;
    border-radius: 8px;
  }
}

.px-hot-tag {
  position: absolute;
  top: 0;
  border-radius: 8px;
  width: 71px;
  height: 30px;

  img {
    border-radius: 8px 0 8px 0;
  }
}

.photo {
  position: relative;
  height: 25px;

  .keywordbox {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 25px;
  }
}

.keyword {
  height: 25px;
  line-height: 25px;
  padding: 0 22px;
  text-align: center;

  .color-666-line {
    border-bottom: 2px solid #666666;
  }

  .red-line {
    border-bottom: 2px solid #f65050;
  }
}
</style>
